$(function () {
  

  function randomNum(len) {
    return Math.ceil(Math.random() * len)
  }

  function genData(legend) {
    var list = []
    $.each(legend, function (i, v) {
      list.push({
        name: v,
        icon: 'circle',
        value: randomNum(400)
      })
    })
    return list
  }

  var pieLegend = ['应急', "紧急", "一般"]
  var pieData = genData(pieLegend)

  var pieOption = {
    color: ["#ffe34e", "#93dd6e", "#ff8700", "#09e2cb"],
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} "
    },
    legend: {
      orient: 'vertical',
      left: 10,
      top:20,
      textStyle: {
        color: 'rgba(255,255,255,0.8)'
      },
      show: true,
      data: pieLegend
    },
    series: [{
      name: '',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['45%', '50%'],
      hoverAnimation: true,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: false,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      data: pieData
    }, {
      name: '',
      type: 'pie',
      clockWise: true,
      hoverAnimation: false,
      animationType: 'scale',
      radius: [200, 200],
      center: ['45%', '50%'],
      label: {
        normal: {
          position: 'center'
        }
      },
      data: [{
        value: 0,
        label: {
          normal: {
            formatter: '38',
            textStyle: {
              color: '#20fd07',
              fontSize: 25,
              fontWeight: 'bold'
            }
          }
        }
      }, {
        tooltip: {
          show: false
        },
        label: {
          normal: {
            formatter: '\n门户',
            textStyle: {
              color: '#bbeaf9',
              fontSize: 12
            }
          }
        }
      }]
    }]
  }
  var pieChart = echarts.init(document.querySelector("#pieChart"));
  pieChart.setOption(pieOption)

  function allData(data) {
    var allNum = 0
    for (var a = 0; a < data.length; a++) {
      allNum += data[a].value
    }
    return allNum
  }
  var pieIndex = 0
  var t

  function pieAutoShow() {
    if (pieIndex > 3 - 1) {
      pieIndex = 0
    }
    for (var i = 0; i < 3; i++) {
      if (i != pieIndex) {
        pieOption.series[0].data[i]['selected'] = false;
      } else {
        pieOption.series[0].data[i]['selected'] = true;
      }
    }
    pieOption.series[1].data[0].label.normal.formatter = (pieOption.series[0].data[pieIndex].value / allData(pieData) * 100).toFixed(1) + "%"
    pieOption.series[1].data[1].label.normal.formatter = "" + pieOption.series[0].data[pieIndex].name
    pieChart.setOption(pieOption)
    pieIndex++
  }
  pieAutoShow()
  t = window.setInterval(pieAutoShow, 1200)

  //柱状图
  var dataX = ['部省协同', '省际协同', '企业协同']
  var barOption = {
    color: ["#c8fd6f", "#08e2ca"],
    textStyle: {},
    tooltip: {
      trigger: 'axis',
      textStyle: {

      }
    },
    toolbox: {
      show: false,
      feature: {
        dataView: {
          show: true,
          readOnly: false
        },
        magicType: {
          show: true,
          type: ['line', 'bar']
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    legend: {
      show: true,
      top: 10,
      textStyle: {
        color: '#fff'
      },
      data: ['监测策略', '过滤策略']
    },
    grid: {
      left: '2%',
      top: 45,
      right: 10,
      bottom: '2%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: dataX,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        color: '#c0d4da',
        rotate: 25,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#c0d4da'
        }
      }
    }],
    yAxis: [{
      type: 'value',
      name: '',
      min: 0,
      axisLabel: {
        color: '#c0d4da'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#c0d4da',
        }
      },
      splitLine: {
        lineStyle: {
          color: '#272858'
        }
      }
    }],
    series: [{
      name: '监测策略',
      type: 'bar',
      barWidth: '25%',
      data: [81, 151, 203, 179, 124, 34]
    }, {
      name: '过滤策略',
      type: 'bar',
      barWidth: '25%',
      data: [43, 81, 159, 158, 115, 21]
    }]
  };
  var barChart = echarts.init(document.getElementById('barChart'))
  barChart.setOption(barOption)

  //折线图
  var dataXAxis = ['01/01', '02/01', '03/01', '04/01', '05/01', '06/01']
  var lineOption = {
    color: ["#ff9100", "#4fe3de", "#a1f379", "#e5004f"],
    textStyle: {},
    tooltip: {
      trigger: 'axis',
      textStyle: {}
    },
    toolbox: {
      show: false,
      feature: {
        dataView: {
          show: true,
          readOnly: false
        },
        magicType: {
          show: true,
          type: ['line', 'bar']
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    legend: {
      show: true,
      top: 10,
      textStyle: {
        color: '#fff'
      },
      data: ['监测策略', '过滤策略']
    },
    grid: {
      left: '2%',
      top: 45,
      right: 10,
      bottom: '2%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: dataXAxis,
      boundaryGap: false,
      axisPointer: {
      },
      axisLabel: {
        color: '#c0d4da',
        rotate: 25,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#c0d4da'
        }
      }
    }],
    yAxis: [{
      type: 'value',
      name: '',
      min: 0,
      axisLabel: {
        color: '#c0d4da'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#c0d4da'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#272858'
        }
      }
    }],
    series: [{
      name: '监测策略',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      data: [124, 232, 363, 337, 239, 55]
    }, {
      name: '过滤策略',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      data: [300, 200, 110, 467, 126, 434]
    }]
  };
  var lineChart = echarts.init(document.getElementById('lineChart'))
  lineChart.setOption(lineOption)

  // 地图
var mapSkinColor = localStorage.webSkin ? JSON.parse(localStorage.webSkin).skinMap : ['#0f2d87', '#3770ea', '#2a56bd']
	/*加载广东省地图*/
		var geoCoordMapChina={}
		var mapFeatures = echarts.getMap('china').geoJson.features;
		mapFeatures.forEach(function(v) {
		    // 地区名称
		    var name = v.properties.name;
		    // 地区经纬度
		    geoCoordMapChina[name] = v.properties.cp;
		});
    var geoCoordMapShanghai= {
      '黄浦区': [121.47733,31.202109],
      '徐汇区': [121.431325,31.135424],
      '长宁区': [121.344808,31.207101],
      '静安区': [121.435445,31.281657],
      '普陀区': [121.3915,31.234699],
      '虹口区': [121.47527,31.276962],
      '杨浦区': [121.507199,31.308322],
      '闵行区': [121.496057,31.050694],
      '宝山区': [121.41366,31.421744],
      '嘉定区': [121.224146,31.304481],
      '浦东新区': [121.563349,31.156521],
      '金山区': [121.170587,30.823356],
      '松江区': [121.167841,31.040105],
      '青浦区': [121.121149,31.221135],
      '奉贤区': [121.50567,30.820998],
      '崇明区': [121.346369,31.657]
    };
    var geoCoordMap = Object.assign(geoCoordMapChina,geoCoordMapShanghai);
    var mapData = [{
        name: '黄浦区',
        value: 0,
        news: 36,
        edu: 45,
        medical: 1831,
      },
      {
        name: '徐汇区',
        value: 0,
        news: 59,
        edu: 26,
        medical: 1931
      },
      {
        name: '长宁区',
        value: 0,
        news: 270,
        edu: 2,
        medical: 196631,
      },
      {
        name: '崇明区',
        value: 0,
        news: 23,
        edu: 56,
        medical: 2621,
      },
      {
        name: '奉贤区',
        value: 0,
        news: 190,
        edu: 266,
        medical: 25656,
      },
      {
        name: '青浦区',
        value: 0,
        news: 90,
        edu: 66,
        medical: 32,
      },
      {
        name: '松江区',
        value: 0,
        news: 19,
        edu: 26,
        medical: 596,
      },
      {
        name: '金山区',
        value: 0,
        news: 60,
        edu: 36,
        medical: 745,
      },
      {
        name: '浦东新区',
        value: 0,
        news: 190,
        edu: 266,
        medical: 212,
      },
      {
        name: '嘉定区',
        value: 0,
        news: 190,
        edu: 266,
        medical: 321,
      },
      {
        name: '宝山区',
        value: 0,
        news: 190,
        edu: 266,
        medical: 123,
      },
      {
        name: '闵行区',
        value: 0,
        news: 190,
        edu: 266,
        medical: 423,
      },
      {
        name: '杨浦区',
        value: 0,
        news: 190,
        edu: 266,
        medical: 6831,
      },
      {
        name: '虹口区',
        value: 0,
        news: 10,
        edu: 26,
        medical: 55,
      },
      {
        name: '普陀区',
        value: 0,
        news: 90,
        edu: 26,
        medical: 11,
      },
      {
        name: '静安区',
        value: 0,
        news: 10,
        edu: 266,
        medical: 191,
      }
    ];
    var GZData = [
	    [{name:'上海'},{name:'北京',value:95}],
	    [{name:'上海'},{name:'山西',value:90}],
	    [{name:'上海'},{name:'山东',value:80}],
	    [{name:'上海'},{name:'四川',value:70}],
	    [{name:'上海'},{name:'浙江',value:60}],
	    [{name:'上海'},{name:'海南',value:50}],
	    [{name:'上海'},{name:'湖北',value:40}],
	    [{name:'上海'},{name:'湖南',value:30}],
	    [{name:'上海'},{name:'陕西',value:20}],
	    [{name:'上海'},{name:'黑龙江',value:10}]
		];
		
		var lineConvertData = function (data) {
//	    console.log(data);
	    var res = [];
	    for (var i = 0; i < data.length; i++) {
	        var dataItem = data[i];
	        var fromCoord = geoCoordMap[dataItem[0].name];
	        var toCoord = geoCoordMap[dataItem[1].name];
	        if (fromCoord && toCoord) {
	            res.push({
	                fromName: dataItem[0].name,
	                toName: dataItem[1].name,
	                coords: [fromCoord, toCoord],
	                value: dataItem[1].value
	            });
	        }
	    }
	    return res;
		};
    
    
    var convertData = function (data) {
      //	console.log(data)
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
            news: data[i].news,
            edu: data[i].edu,
            medical: data[i].medical
          });
        }
      }
      return res;
    };
    //重新渲染地图数据
    function mapEvt() {
      var max1 = mapData[0].news
      var max2 = mapData[0].edu
      var max3 = mapData[0].medical
      for (var i = 0; i < mapData.length; i++) {
        for (var j = 0; j < mapData.length; j++) {
          if (max1 <= mapData[j].news) {
            max1 = mapData[j].news
          }
          if (max2 <= mapData[j].edu) {
            max2 = mapData[j].edu
          }
          if (max3 <= mapData[j].medical) {
            max3 = mapData[j].medical
          }
        }
        mapData[i].value = (mapData[i].news / max1 + mapData[i].edu / max2 + mapData[i].medical / max3).toFixed(2)
      }
    }
    mapEvt()
    function rank(data) {
      var newData = data.sort(function (a, b) {
        return b.value - a.value
      })
      for (var i = 0; i < data.length; i++) {
        newData[i].rank = i + 1
      }
      return newData
    }
    rank(mapData)

    function mapOtptions(mapType){
    	var seriesData = []
    	if(mapType==='上海'){
    		seriesData.push({
	        type: 'map',
	        zoom: 1.1,
	        mapType: mapType,
	        //		geoIndex: 0,
	        roam: false,
	        label: {
	          normal: {
	            show: false,
	            textStyle: {
	              color: '#fff'
	            }
	          },
	          emphasis: {
	            show: true,
	            textStyle: {
	              color: '#fff'
	            }
	          }
	        },
	        itemStyle: {
	          normal: {
	            show: false,
	            borderColor: mapSkinColor[1],
	            borderWidth: 1,
	            areaColor: mapSkinColor[0]
	          },
	          emphasis: {
	            areaColor: mapSkinColor[2],
	            borderColor: mapSkinColor[2],
	          }
	        },
	        data: convertData(mapData.sort(function (a, b) {
	          return b.value - a.value;
	        }))
	      }, {
	        name: 'Top 5',
	        type: 'effectScatter',
	        zlevel: 1,
	        coordinateSystem: 'geo',
	        symbolSize: function (val) {
	          return val[2] * 4 + 8;
	        },
	        showEffectOn: 'render',
	        rippleEffect: {
	          brushType: 'stroke'
	        },
	        hoverAnimation: true,
	        label: {
	          normal: {
	            //            formatter: '{b}',
	            position: 'right',
	            show: false
	          }
	        },
	        itemStyle: {
	          normal: {
	            color: '#f4e925',
	            shadowBlur: 10,
	            shadowColor: '#333'
	          }
	        },
	        //    data: convertData(mapData)
	        data: convertData(mapData.sort(function (a, b) {
	          return b.value - a.value;
	        }).slice(0,5))
	      }, {
	        name: 'Top 5',
	        type: 'scatter',
	        zlevel: 1,
	        coordinateSystem: 'geo',
	        symbolSize: function (val) {
	          return val[2] * 4 + 8;
	        },
	        showEffectOn: 'render',
	        rippleEffect: {
	          brushType: 'stroke'
	        },
	        hoverAnimation: true,
	        label: {
	          normal: {
	            //            formatter: '{b}',
	            position: 'right',
	            show: false
	          }
	        },
	        itemStyle: {
	          normal: {
	            color: '#f4e925',
	            shadowBlur: 10,
	            shadowColor: '#333'
	          }
	        },
	        //    data: convertData(mapData)
	        data: convertData(mapData.sort(function (a, b) {
	          return b.value - a.value;
	        }).slice(5))
	      })
    	}else if(mapType==='china'){
    		seriesData.push({
	        type: 'map',
	        zoom: 1.1,
	        mapType: mapType,
	        //		geoIndex: 0,
	        roam: false,
	        label: {
	          normal: {
	            show: false,
	            textStyle: {
	              color: '#fff'
	            }
	          },
	          emphasis: {
	            show: true,
	            textStyle: {
	              color: '#fff'
	            }
	          }
	        },
	        itemStyle: {
	          normal: {
	            show: false,
	            borderColor: mapSkinColor[1],
	            borderWidth: 1,
	            areaColor: mapSkinColor[0]
	          },
	          emphasis: {
	            areaColor: mapSkinColor[2],
	            borderColor: mapSkinColor[2],
	          }
	        },
	        data: convertData(mapData.sort(function (a, b) {
	          return b.value - a.value;
	        }))
	      }, {
        // 白色航线特效图
	        type: 'lines',    
	        zlevel: 1,                    // 用于分层，z-index的效果
	        effect: {
	            show: true,               // 动效是否显示
	            period: 6,                // 特效动画时间
	            trailLength: 0.7,         // 特效尾迹的长度
	            color: '#fff',            // 特效颜色
	            symbolSize: 1             // 特效大小
	        },
	        lineStyle: {
	            normal: {                 // 正常情况下的线条样式
//	                color: color[0],
	                width: 0,             // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
	                curveness: -0.2       // 线条曲度
	            }
	        },
	        data: lineConvertData(GZData)    // 特效的起始、终点位置
		    }, {  
		        type: 'lines',
		        zlevel: 2,
		        symbol: ['none', 'none'],   // 用于设置箭头
		        symbolSize: 2,
		        effect: {
		            show: true,
		            period: 6,
		            trailLength: 0,
		            symbol: 'none',         // 特效形状，可以用其他svg pathdata路径代替
		            symbolSize: 15             
		        },
		        lineStyle: {
		            normal: {
//		                color: color[0],
		                width: 1,
		                opacity: 0.6,
		                curveness: -0.2
		            }
		        },
		        data: lineConvertData(GZData)     // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
		    }, { // 散点效果
        type: 'effectScatter',         
        coordinateSystem: 'geo',       // 表示使用的坐标系为地理坐标系
        zlevel: 3,
        rippleEffect: {
            brushType: 'stroke'        // 波纹绘制效果
        },
        label: {
            normal: {                  // 默认的文本标签显示样式
                show: true,
                position: 'left',      // 标签显示的位置
                formatter: '{b}'       // 标签内容格式器
            },
            
        },
       	itemStyle: {
	          normal: {
	            color: '#f4e925',
	            shadowBlur: 10,
	            shadowColor: '#333'
	          }
	        },
        data: GZData.map(function(dataItem) {
            return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name],  // 起点的位置
                symbolSize: dataItem[1].value / 8,  // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
            };
        })
    } );
    	}
    	var mapOption = {
	      tooltip: {
	        trigger: 'item',
	        textStyle: {
	        },
	        formatter: function (param) {
	          //			console.log(param)
	          return '<div>' + param.name + '</div>' +
	            '<div>新闻类：' + param.data.news + '</div>' +
	            '<div>教育类：' + param.data.edu + '</div>' +
	            '<div>医疗类：' + param.data.medical + '</div>';
	        }
	      },
	      geo: {
	        show: true,
	        zoom: 1.1,
	        roam: false,
	        map: mapType,
	        itemStyle: {
	          normal: {
	            show: false,
	            borderColor: '#285ac6',
	            borderWidth: 1,
	            areaColor: '#123082',
	            shadowBlur: 3,
	            shadowColor: '#081435',
	            shadowOffsetX: -4,
	            shadowOffsetY: 8
	          },
	          emphasis: {
	            areaColor: '#fce24f',
	            borderColor: '#fce24f'
	          }
	        }
	      },
	      series: seriesData
	    };
			return mapOption
    }
    var mapChart = echarts.init(document.getElementById('mapChart'));
    mapChart.setOption(mapOtptions('上海'),true);

    $('.mapBarTab li').click(function(){
      $('.mapBarTab li').removeClass('active')
      $(this).addClass('active')
    	if($(this).index()===0){
    		mapChart.setOption(mapOtptions('上海'),true);
    	}else if($(this).index()===1){
    		mapChart.setOption(mapOtptions('china'),true);
    	}
    })


  window.onresize = function () {
    //重置绘制echarts
    pieChart.resize();
    barChart.resize();
    lineChart.resize();
    mapChart.resize();
  }
});